<template>
	<view class="page">
		<wd-navbar title="编辑个人资料" fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false"
			@click-left="handleClickLeft"></wd-navbar>
		<view class="avatar_container d-flex-center">
			<view class="avatar_box" @click="handleChooseFile">
				<wd-img custom-class="avatar" :src='userInfo.imgurl || "/static/assets/my/avatar.png"' width="142" height="142"></wd-img>
				<wd-img custom-class="camera" src="/static/assets/my/camera.png" width="34" height="28"></wd-img>
			</view>
			<text style="font-size: 18px;margin-top: 10px;">点击更换头像</text>
		</view>
		<view class="info_box">
			<wd-cell title="昵称" center is-link @click="toRouter('/pages/my/nickname')">
				<view class="context_box">
					{{ userInfo.nickname || '添加您的昵称'}}
				</view>
			</wd-cell>
			<wd-cell title="手机号" center>
				<view class="context_box">
					{{userInfo?.username?.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}<text style="padding: 12px;"></text>
				</view>
			</wd-cell>
			<wd-cell title="壁纸ID" center>
				<view class="context_box">
					{{userInfo?.ids}}<text style="padding: 12px;"></text>
				</view>
			</wd-cell>
			<wd-cell title="简介" center is-link @click="toRouter('/pages/my/intro')">
				<view class="context_box">
					{{ userInfo.profile || '添加您的个人简介'}}
				</view>
			</wd-cell>
			<wd-picker :columns="genderColumns" align-right label="性别" placeholder="未知" v-model="userInfo.sex" @confirm="handleConfirm"/>
			<wd-datetime-picker type="date" :default-value="datePickerDefaultVal" :minDate="0" v-model="userInfo.birthday" label="生日" placeholder="请选择" align-right @confirm="handleConfirm" />
		</view>
	</view>
</template>

<script setup>
	import {
		closeToast,
		showToast,
		showToastLoading,
		toRouter
	} from "@/hooks/utils";
	import {
		ref, watch, computed
	} from 'vue';
	import store from "../../store";
	const GENDER = {
		BOY: "1",
		GIRL: "2"
	}
	const genderColumns = [
		{
			label: '男',
			value: GENDER.BOY
		},
		{
			label: '女',
			value: GENDER.GIRL
		}
	];
	const userInfo = computed(()=>{
		return {
			...store.state.value.userInfo,
			birthday: store.state.value.userInfo?.birthday && new Date(store.state.value.userInfo.birthday)
		}
	})
	const datePickerDefaultVal = Date.now()
	const handleClickLeft = function handleClickLeft() {
		uni.navigateBack()
	}
	const timestampToDateString = (timestamp) => {
		  if(typeof timestamp === 'string' || !timestamp) return timestamp
	      const date = new Date(timestamp); // 因为uni-app里时间戳一般是秒为单位，需转换为毫秒
	      const year = date.getFullYear();
	      const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份要加1，且格式化为两位数
	      const day = ('0' + date.getDate()).slice(-2);
	      return `${year}-${month}-${day}`;
	}
	const handleConfirm = ()=> {
		store.updateUserInfo({
			...userInfo.value,
			birthday: timestampToDateString(userInfo.value.birthday)
		})
	}
	const handleChooseFile = ()=> {
		uni.chooseImage({
			count: 1
		}).then(resp=>{
			console.log(resp)
			const [filePath] = resp.tempFilePaths;
			showToastLoading()
		    uni.uploadFile({
				url: "https://tools-api.xiaoohui.com/api/wallpaper/oss/upload/single",
				formData: {
					Dictionary: 'static-wallpaper',
					Category: 'avatar'
				},
				fileType: 'image',
				name: 'file',
				filePath
			}).then(resp=>{
				store.updateUserInfo({
					imgurl: resp.data
				})
				closeToast()
			})
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.nav) {
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
	}

	.page {
		position: relative;

		&:before {
			content: '';
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
			z-index: -1;
		}
	}

	.avatar_container {
		flex-flow: column;
		padding: 80rpx 0;

		.avatar_box {
			position: relative;
			border-radius: 50%;
			overflow: hidden;
			width: 142px;
			height: 142px;
			:deep(.avatar) {
				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, .4);
				}
			}

			:deep(.camera) {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.info_box {
		--wot-input-placeholder-color: #979797;
		:deep(.wd-cell), :deep(.wd-picker__cell), .wd-cell__value {
			background-color: transparent;
			--wot-cell-value-color: #979797;
			--wot-cell-title-fs: 18px;
			--wot-cell-value-fs: 18px;
		}
		
	}

	.context_box {
		color: #979797;
		max-width: 50vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right;
	}
</style>